CSS मध्ये प्राविण्य: @property सह कस्टम प्रॉपर्टी रजिस्ट्रेशन

कस्टम प्रॉपर्टीज (CSS व्हेरिएबल्स म्हणूनही ओळखल्या जातात) यांनी CSS लिहिण्याची आणि जपण्याची पद्धत बदलून टाकली आहे. ते आपल्याला रियुजेबल व्हॅल्यूज परिभाषित करण्यास परवानगी देतात, ज्यामुळे आपल्या स्टाईलशीट अधिक लवचिक आणि जतन करण्यायोग्य बनतात. पण जर तुम्ही फक्त व्हॅल्यूज परिभाषित करण्याच्या पलीकडे जाऊ शकला तर काय? जर तुम्ही कस्टम प्रॉपर्टी कोणत्या प्रकारची व्हॅल्यू ठेवते, हे तिच्या इनिशियल व्हॅल्यू आणि इनहेरिटन्स बिहेवियर सोबत परिभाषित करू शकला तर काय? इथेच @property उपयोगी ठरते.

@property म्हणजे काय?

@property हे एक CSS ॲट-रूल आहे जे तुम्हाला ब्राउझरमध्ये कस्टम प्रॉपर्टी स्पष्टपणे रजिस्टर करण्याची परवानगी देते. ही रजिस्ट्रेशन प्रक्रिया ब्राउझरला प्रॉपर्टीच्या अपेक्षित प्रकाराबद्दल, तिच्या इनिशियल व्हॅल्यूबद्दल आणि तिने तिच्या पॅरेंट एलिमेंटकडून इनहेरिट करायला पाहिजे की नाही याबद्दल माहिती देते. हे अनेक प्रगत क्षमता अनलॉक करते, ज्यात खालील गोष्टींचा समावेश आहे:

• प्रकार तपासणी: कस्टम प्रॉपर्टीला योग्य प्रकारची व्हॅल्यू दिली आहे याची खात्री करते.
• ॲनिमेशन: ठराविक प्रकारच्या कस्टम प्रॉपर्टीजसाठी, जसे की संख्या किंवा रंग, स्मूथ ट्रांझिशन आणि ॲनिमेशन सक्षम करते.
• डीफॉल्ट व्हॅल्यूज: कस्टम प्रॉपर्टी स्पष्टपणे परिभाषित न केल्यास फॉलबॅक व्हॅल्यू पुरवते.
• इनहेरिटन्स कंट्रोल: कस्टम प्रॉपर्टी तिच्या पॅरेंट एलिमेंटकडून व्हॅल्यू इनहेरिट करते की नाही हे ठरवते.

याला तुमच्या CSS व्हेरिएबल्समध्ये टाइप सेफ्टी जोडण्यासारखे समजा. हे तुम्हाला अधिक मजबूत आणि अंदाज लावता येण्याजोग्या स्टाईलशीट तयार करण्यास अनुमती देते.

@property चे सिंटॅक्स

@property नियम खालीलप्रमाणे आहे:

@property --property-name {
  syntax: '';
  inherits: true | false;
  initial-value: ;
}

चला प्रत्येक भागाचे विश्लेषण करूया:

• --property-name: तुम्ही रजिस्टर करू इच्छित असलेल्या कस्टम प्रॉपर्टीचे नाव. हे दोन हायफन (--) ने सुरू झाले पाहिजे.
• syntax: प्रॉपर्टीसाठी अपेक्षित व्हॅल्यूचा प्रकार परिभाषित करते. हे टाइप तपासणी आणि ॲनिमेशनसाठी महत्त्वाचे आहे. आपण खाली उपलब्ध सिंटॅक्स व्हॅल्यूज तपशीलवार पाहू.
• inherits: प्रॉपर्टीने तिच्या पॅरेंट एलिमेंटकडून इनहेरिट करायला पाहिजे की नाही हे दर्शवणारी बुलियन व्हॅल्यू. निर्दिष्ट न केल्यास डीफॉल्ट व्हॅल्यू false असते.
• initial-value: जर एखाद्या एलिमेंटवर प्रॉपर्टी स्पष्टपणे सेट नसेल, तर प्रॉपर्टीसाठी डीफॉल्ट व्हॅल्यू. हे सुनिश्चित करते की फॉलबॅक व्हॅल्यू नेहमी उपलब्ध असते.

syntax डिस्क्रिप्टर समजून घेणे

syntax डिस्क्रिप्टर हा @property नियमाचा सर्वात महत्त्वाचा भाग आहे. हे ब्राउझरला कस्टम प्रॉपर्टीसाठी कोणत्या प्रकारच्या व्हॅल्यूची अपेक्षा करायची आहे हे सांगते. येथे काही सामान्य सिंटॅक्स व्हॅल्यूज आहेत:

• *: कोणत्याही व्हॅल्यूला अनुमती देते. हा सर्वात परवानगि देणारा सिंटॅक्स आहे आणि रजिस्ट्रेशनशिवाय स्टँडर्ड CSS व्हेरिएबलच्या बिहेवियरची नक्कल करतो. याचा वापर जपून करा.
• <length>: लेंथ व्हॅल्यूची अपेक्षा करते (उदा. 10px, 2em, 50%). हे वेगवेगळ्या लेंथ व्हॅल्यूजमध्ये स्मूथ ॲनिमेशन सक्षम करते.
• <number>: न्यूमेरिक व्हॅल्यूची अपेक्षा करते (उदा. 1, 3.14, -5). ओपॅसिटी किंवा स्केलसारख्या न्यूमेरिकल प्रॉपर्टीज ॲनिमेट करण्यासाठी उपयुक्त.
• <percentage>: परसेंटेज व्हॅल्यूची अपेक्षा करते (उदा. 25%, 100%).
• <color>: कलर व्हॅल्यूची अपेक्षा करते (उदा. #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). स्मूथ कलर ट्रांझिशन आणि ॲनिमेशन सक्षम करते.
• <image>: इमेज व्हॅल्यूची अपेक्षा करते (उदा. url(image.jpg), linear-gradient(...)).
• <integer>: इंटिजर व्हॅल्यूची अपेक्षा करते (उदा. 1, -10, 0).
• <angle>: अँगल व्हॅल्यूची अपेक्षा करते (उदा. 45deg, 0.5rad, 200grad). रोटेशन ॲनिमेट करण्यासाठी उपयुक्त.
• <time>: टाइम व्हॅल्यूची अपेक्षा करते (उदा. 1s, 500ms). कस्टम प्रॉपर्टीजद्वारे ॲनिमेशन कालावधी किंवा विलंब नियंत्रित करण्यासाठी उपयुक्त.
• <resolution>: रिझोल्यूशन व्हॅल्यूची अपेक्षा करते (उदा. 300dpi, 96dpi).
• <transform-list>: ट्रांसफॉर्म फंक्शन्सच्या लिस्टची अपेक्षा करते (उदा. translateX(10px) rotate(45deg)). कॉम्प्लेक्स ट्रांसफॉर्मेशन ॲनिमेट करण्यास अनुमती देते.
• <custom-ident>: कस्टम आयडेंटिफायर (एक स्ट्रिंग) ची अपेक्षा करते. enum प्रमाणे.
• <string>: स्ट्रिंग व्हॅल्यूची अपेक्षा करते (उदा. "Hello World"). याच्यासोबत काळजी घ्या, कारण स्ट्रिंग ॲनिमेट करणे सामान्यतः सपोर्टेड नाही.
• कस्टम सिंटॅक्स: आपण वरील आणि | (किंवा), `[]` (ग्रुपिंग), `+` (एक किंवा अधिक), `*` (शून्य किंवा अधिक), आणि `?` (शून्य किंवा एक) ऑपरेटरचे कॉम्बिनेशन वापरून अधिक कॉम्प्लेक्स सिंटॅक्स तयार करू शकता. उदाहरणार्थ: <length> | <percentage> एकतर लेंथ किंवा परसेंटेज व्हॅल्यूला अनुमती देते.

@property ची पूर्ण क्षमता वापरण्यासाठी योग्य syntax निवडणे आवश्यक आहे.

@property ची प्रात्यक्षिक उदाहरणे

तुमच्या CSS मध्ये @property कसे वापरायचे याची काही प्रात्यक्षिक उदाहरणे पाहूया.

उदाहरण 1: बॅकग्राउंड कलर ॲनिमेट करणे

समजा तुम्हाला एका बटणचा बॅकग्राउंड कलर ॲनिमेट करायचा आहे. तुम्ही बॅकग्राउंड कलरसाठी कस्टम प्रॉपर्टी रजिस्टर करण्यासाठी @property वापरू शकता आणि नंतर CSS ट्रांझिशन वापरून त्याला ॲनिमेट करू शकता.

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Red */
}

या उदाहरणात, आम्ही --bg-color कस्टम प्रॉपर्टी <color> सिंटॅक्ससह रजिस्टर करतो, म्हणजे ती कलर व्हॅल्यूची अपेक्षा करते. initial-value पांढरा (#fff) वर सेट आहे. जेव्हा बटणावर माउस फिरवला जातो, तेव्हा --bg-color लाल (#f00) मध्ये बदलला जातो आणि ट्रांझिशन बॅकग्राउंड कलर बदल स्मूथपणे ॲनिमेट करते.

उदाहरण 2: नंबरसह बॉर्डर रेडियस नियंत्रित करणे

तुम्ही एलिमेंटची बॉर्डर रेडियस नियंत्रित करण्यासाठी आणि ॲनिमेट करण्यासाठी @property वापरू शकता.

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

येथे, आम्ही --border-radius ला <length> म्हणून रजिस्टर करतो, हे सुनिश्चित करतो की ते px, em किंवा % सारख्या लेंथ व्हॅल्यूज स्वीकारते. इनिशियल व्हॅल्यू 0px आहे. .rounded-box वर माउस फिरवताना, बॉर्डर रेडियस 20px पर्यंत ॲनिमेट होते.

उदाहरण 3: शॅडो ऑफसेट ॲनिमेट करणे

समजा तुम्हाला बॉक्स शॅडोचा हॉरिझॉन्टल ऑफसेट ॲनिमेट करायचा आहे.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

या प्रकरणात, --shadow-offset-x ला <length> म्हणून रजिस्टर केले जाते आणि त्याची इनिशियल व्हॅल्यू 0px आहे. box-shadow प्रॉपर्टी त्याच्या हॉरिझॉन्टल ऑफसेटसाठी ही कस्टम प्रॉपर्टी वापरते. हॉवर केल्यावर, ऑफसेट 10px पर्यंत ॲनिमेट होते.

उदाहरण 4: थीमिंगसाठी <custom-ident> वापरणे

<custom-ident> सिंटॅक्स तुम्हाला पूर्वनिर्धारित स्ट्रिंग व्हॅल्यूजचा सेट परिभाषित करण्यास अनुमती देतो, प्रभावीपणे तुमच्या CSS व्हेरिएबल्ससाठी enum तयार करतो. हे थीमिंग किंवा विशिष्ट स्टेट्स नियंत्रित करण्यासाठी उपयुक्त आहे.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* डीफॉल्ट थीम */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

येथे, --theme ला <custom-ident> सिंटॅक्ससह रजिस्टर केले आहे. जरी आम्ही @property नियमात स्पष्टपणे परवानगी असलेल्या आयडेंटिफायर्सची यादी करत नाही, तरी कोड सूचित करतो की ते `light` आणि `dark` आहेत. CSS नंतर कंडिशनल लॉजिक (var(--theme) == light ? ... : ...) वापरून वर्तमान थीमवर आधारित वेगवेगळ्या स्टाईल्स लागू करते. एलिमेंटमध्ये `dark-theme` क्लास जोडल्याने थीम डार्कवर स्विच होईल. लक्षात ठेवा की `var()` वापरून कंडिशनल लॉजिक हे स्टँडर्ड CSS नाही आणि त्यासाठी अनेकदा प्रीप्रोसेसर किंवा JavaScript ची आवश्यकता असते. अधिक स्टँडर्ड दृष्टीकोन CSS क्लासेस आणि कॅस्केडिंग वापरेल:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* थीम टॉगल करण्यासाठी JavaScript */
/* document.body.setAttribute('data-theme', 'dark'); */

या सुधारित उदाहरणात, आम्ही थीम नियंत्रित करण्यासाठी body एलिमेंटवर data-theme ॲट्रिब्यूट वापरतो. JavaScript (कमेंटेड आऊट) चा वापर ॲट्रिब्यूट `light` आणि `dark` मध्ये टॉगल करण्यासाठी केला जाईल. CSS व्हेरिएबल्ससह थीमिंगसाठी हा अधिक मजबूत आणि स्टँडर्ड दृष्टीकोन आहे.

@property वापरण्याचे फायदे

@property वापरण्याचे अनेक फायदे आहेत:

• सुधारित कोड रीडेबिलिटी आणि जतनक्षमता: कस्टम प्रॉपर्टीसाठी अपेक्षित व्हॅल्यूचा प्रकार स्पष्टपणे परिभाषित करून, तुम्ही तुमचा कोड अधिक समजण्यायोग्य आणि त्रुटी होण्याची शक्यता कमी करता.
• वर्धित ॲनिमेशन क्षमता: @property कस्टम प्रॉपर्टीजसाठी स्मूथ ट्रांझिशन आणि ॲनिमेशन सक्षम करते, ज्यामुळे डायनॅमिक आणि आकर्षक यूजर इंटरफेस तयार करण्यासाठी नवीन शक्यता उघडतात.
• चांगली कार्यक्षमता: ब्राउझर रजिस्टर केलेल्या कस्टम प्रॉपर्टीज वापरून एलिमेंट्सचे रेंडरिंग ऑप्टिमाइझ करू शकतात, ज्यामुळे कार्यक्षमता सुधारते.
• टाइप सेफ्टी: ब्राउझर हे तपासते की दिलेली व्हॅल्यू घोषित सिंटॅक्सशी जुळते की नाही, अनपेक्षित बिहेवियर टाळते आणि डीबगिंग सोपे करते. हे विशेषतः मोठ्या प्रोजेक्ट्समध्ये उपयुक्त आहे जिथे अनेक डेव्हलपर कोडबेसमध्ये योगदान देत आहेत.
• डीफॉल्ट व्हॅल्यूज: कस्टम प्रॉपर्टीमध्ये नेहमी व्हॅलिड व्हॅल्यू असल्याची खात्री करणे, जरी ती स्पष्टपणे सेट केलेली नसेल तरी, त्रुटी टाळते आणि तुमच्या CSS ची मजबूती सुधारते.

ब्राउझर सुसंगतता

2023 च्या उत्तरार्धापर्यंत, @property ला चांगली, पण युनिव्हर्सल ब्राउझर सपोर्ट नाही. हे Chrome, Firefox, Safari आणि Edge सह बहुतेक आधुनिक ब्राउझरमध्ये सपोर्टेड आहे. तथापि, जुने ब्राउझर याला सपोर्ट करू शकत नाहीत. प्रॉडक्शनमध्ये @property वापरण्यापूर्वी नेहमी Can I use... सारख्या वेबसाइट्सवर ब्राउझर सुसंगततेची नवीनतम माहिती तपासा.

जुन्या ब्राउझरला हाताळण्यासाठी, तुम्ही फॉलबॅक स्टाईल्स देण्यासाठी फीचर क्वेरीज (@supports) वापरू शकता:

@supports (--property: value) {
  /* @property वापरणाऱ्या स्टाईल्स */
}

@supports not (--property: value) {
  /* @property सपोर्ट न करणाऱ्या ब्राउझरसाठी फॉलबॅक स्टाईल्स */
}

--property आणि value ला ॲक्चुअल कस्टम प्रॉपर्टी आणि त्याच्या व्हॅल्यूने बदला.

@property कधी वापरावे

खालील परिस्थितीत @property वापरण्याचा विचार करा:

• तुम्हाला कस्टम प्रॉपर्टीज ॲनिमेट करायच्या असतील तेव्हा: हे @property चे प्राथमिक उपयोग प्रकरण आहे. योग्य सिंटॅक्ससह प्रॉपर्टी रजिस्टर केल्याने स्मूथ ॲनिमेशन सक्षम होते.
• तुम्ही कस्टम प्रॉपर्टीजसाठी टाइप सेफ्टी लागू करू इच्छित असाल तेव्हा: जर तुम्हाला हे सुनिश्चित करायचे असेल की कस्टम प्रॉपर्टीमध्ये नेहमी विशिष्ट प्रकारची व्हॅल्यू असेल, तर ती रजिस्टर करण्यासाठी @property वापरा.
• तुम्ही कस्टम प्रॉपर्टीसाठी डीफॉल्ट व्हॅल्यू देऊ इच्छित असाल तेव्हा: initial-value डिस्क्रिप्टर तुम्हाला फॉलबॅक व्हॅल्यू निर्दिष्ट करण्यास अनुमती देते.
• मोठ्या प्रोजेक्ट्समध्ये: @property कोड जतनक्षमता वाढवते आणि त्रुटी टाळते, ज्यामुळे ते अनेक डेव्हलपर असलेल्या मोठ्या प्रोजेक्ट्ससाठी विशेषतः फायदेशीर ठरते.
• रियुजेबल कंपोनंट्स किंवा डिझाइन सिस्टम तयार करताना: @property तुमच्या कंपोनंट्समध्ये सुसंगतता आणि अंदाज लावता येण्याची खात्री करण्यास मदत करू शकते.

टाळण्यासाठी सामान्य चुका

• syntax डिस्क्रिप्टर विसरणे: syntax डिस्क्रिप्टरशिवाय, ब्राउझरला अपेक्षित व्हॅल्यूचा प्रकार कळणार नाही आणि ॲनिमेशन योग्यरित्या कार्य करणार नाहीत.
• चुकीची syntax व्हॅल्यू वापरणे: चुकीचा सिंटॅक्स निवडल्याने अनपेक्षित बिहेवियर होऊ शकते. अपेक्षित व्हॅल्यूचा प्रकार अचूकपणे दर्शवणारा सिंटॅक्स निवडण्याची खात्री करा.
• initial-value न देणे: इनिशियल व्हॅल्यूशिवाय, कस्टम प्रॉपर्टी अनडिफाइन्ड असू शकते, ज्यामुळे त्रुटी येऊ शकतात. नेहमी एक समंजस डीफॉल्ट व्हॅल्यू द्या.
• सिंटॅक्स म्हणून * चा जास्त वापर करणे: सोयीस्कर असले तरी, * वापरल्याने टाइप तपासणी आणि ॲनिमेशनचे फायदे कमी होतात. तुम्हाला खरोखरच कोणत्याही प्रकारच्या व्हॅल्यूला अनुमती देण्याची आवश्यकता असेल तेव्हाच ते वापरा.
• ब्राउझर सुसंगतता दुर्लक्षित करणे: नेहमी ब्राउझर सुसंगतता तपासा आणि जुन्या ब्राउझरसाठी फॉलबॅक स्टाईल्स द्या.

@property आणि CSS हाउडिनी

@property हे CSS हाउडिनी नावाच्या API च्या मोठ्या सेटचा भाग आहे. हाउडिनी डेव्हलपरना ब्राउझरच्या रेंडरिंग इंजिनमध्ये टॅप करण्यास अनुमती देते, ज्यामुळे त्यांना स्टायलिंग आणि लेआउट प्रक्रियेवर अभूतपूर्व नियंत्रण मिळते. इतर हाउडिनी API मध्ये खालील गोष्टींचा समावेश आहे:

• पेंट API: तुम्हाला कस्टम बॅकग्राउंड इमेजेस आणि बॉर्डर्स परिभाषित करण्यास अनुमती देते.
• ॲनिमेशन वर्कलेट API: ब्राउझरच्या कंपोझिटर थ्रेडमध्ये थेट चालणारी उच्च-कार्यक्षमतेची ॲनिमेशन तयार करण्याचा मार्ग प्रदान करते.
• लेआउट API: तुम्हाला कस्टम लेआउट अल्गोरिदम परिभाषित करण्यास सक्षम करते.
• पार्सर API: ब्राउझरच्या CSS पार्सरमध्ये ॲक्सेस प्रदान करते.

@property हे शिकण्यासाठी तुलनेने सोपे हाउडिनी API आहे, परंतु ते अधिक प्रगत हाउडिनी वैशिष्ट्ये एक्सप्लोर करण्यासाठी दरवाजे उघडते.

निष्कर्ष

@property हे एक शक्तिशाली CSS ॲट-रूल आहे जे कस्टम प्रॉपर्टीजसाठी प्रगत क्षमता अनलॉक करते. ब्राउझरमध्ये कस्टम प्रॉपर्टीज रजिस्टर करून, तुम्ही टाइप सेफ्टी लागू करू शकता, स्मूथ ॲनिमेशन सक्षम करू शकता आणि तुमच्या CSS कोडची एकूण मजबूती सुधारू शकता. ब्राउझर सपोर्ट युनिव्हर्सल नसला तरी, @property वापरण्याचे फायदे, विशेषत: मोठे प्रोजेक्ट्स आणि डिझाइन सिस्टममध्ये, ते आधुनिक वेब डेव्हलपमेंटसाठी एक मौल्यवान साधन बनवते. @property स्वीकारा आणि तुमची CSS कौशल्ये पुढील स्तरावर घेऊन जा!